<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理</title>
    <link rel="stylesheet" href="css/role_list.css">
    <style>
        .container {
            padding: 20px;
        }
        .search-form {
            margin-bottom: 20px;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
        .operation-column {
            min-width: 250px;
        }
        .description-column {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <el-card>
        <div slot="header">
            <span>角色管理</span>
            <el-button style="float: right;" type="primary" @click="showAddDialog">新增角色</el-button>
        </div>

        <!-- 搜索表单 -->
        <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="角色名称">
                <el-input v-model="searchForm.roleName" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 角色表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="roleId" label="角色ID" width="80"></el-table-column>
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
            <el-table-column prop="description" label="描述" class-name="description-column"></el-table-column>
            <el-table-column label="操作" class-name="operation-column">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    <el-button size="mini" type="primary" @click="showAssignMenuDialog(scope.row)">分配菜单</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.current"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </el-card>

    <!-- 新增/编辑角色对话框 -->
    <el-dialog :title="roleDialogTitle" :visible.sync="roleDialogVisible" width="50%">
        <el-form :model="roleForm" :rules="roleRules" ref="roleForm" label-width="100px">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="roleForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="description">
                <el-input type="textarea" v-model="roleForm.description"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="roleDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitRoleForm">确 定</el-button>
            </span>
    </el-dialog>

    <!-- 分配菜单对话框 -->
    <el-dialog title="分配菜单" :visible.sync="menuDialogVisible" width="30%">
        <el-tree
                ref="menuTree"
                :data="menuTreeData"
                show-checkbox
                node-key="id"
                :props="treeProps"
                :default-expand-all="true"
        ></el-tree>
        <span slot="footer" class="dialog-footer">
                <el-button @click="menuDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveRoleMenus">保存</el-button>
            </span>
    </el-dialog>
</div>

<script src="js/role/vue.js"></script>
<script src="js/role/index.js"></script>
<script src="js/role/min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                searchForm: {
                    roleName: ''
                },
                tableData: [],
                pagination: {
                    current: 1,
                    pageSize: 10,
                    total: 0
                },
                roleDialogVisible: false,
                roleDialogTitle: '新增角色',
                roleForm: {
                    roleId: null,
                    roleName: '',
                    description: ''
                },
                roleRules: {
                    roleName: [
                        { required: true, message: '请输入角色名称', trigger: 'blur' }
                    ],
                    description: [
                        { required: false, message: '请输入角色描述', trigger: 'blur' }
                    ]
                },
                menuDialogVisible: false,
                currentRoleId: null,
                menuTreeData: [],
                treeProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        created() {
            this.fetchData();
        },
        methods: {
            // 获取角色数据
            fetchData() {
                const params = {
                    roleName: this.searchForm.roleName,
                    pageSize: this.pagination.pageSize,
                    current: this.pagination.current
                };

                axios.get('/sysRole/pageRole', { params })
                    .then(response => {
                        const pageData = response.data;
                        this.tableData = pageData.records;
                        this.pagination.total = pageData.total;
                    })
                    .catch(error => {
                        this.$message.error('获取角色数据失败: ' + error.message);
                    });
            },

            // 搜索
            handleSearch() {
                this.pagination.current = 1;
                this.fetchData();
            },

            // 重置搜索
            resetSearch() {
                this.searchForm = {
                    roleName: ''
                };
                this.handleSearch();
            },

            // 分页大小改变
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.fetchData();
            },

            // 当前页改变
            handleCurrentChange(val) {
                this.pagination.current = val;
                this.fetchData();
            },

            // 显示新增角色对话框
            showAddDialog() {
                this.roleDialogTitle = '新增角色';
                this.roleForm = {
                    roleId: null,
                    roleName: '',
                    description: ''
                };
                this.roleDialogVisible = true;
                this.$nextTick(() => {
                    this.$refs.roleForm.clearValidate();
                });
            },

            // 编辑角色
            handleEdit(row) {
                this.roleDialogTitle = '编辑角色';
                this.roleForm = {
                    roleId: row.roleId,
                    roleName: row.roleName,
                    description: row.description
                };
                this.roleDialogVisible = true;
                this.$nextTick(() => {
                    this.$refs.roleForm.clearValidate();
                });
            },

            // 提交角色表单
            submitRoleForm() {
                this.$refs.roleForm.validate(valid => {
                    if (valid) {
                        if (this.roleForm.roleId) {
                            // 更新
                            axios.put('/sysRole/RoleUpdate', this.roleForm)
                                .then(response => {
                                    const result = response.data;
                                    if (result.msg === 'success') {
                                        this.$message.success('角色更新成功');
                                        this.roleDialogVisible = false;
                                        this.fetchData();
                                    } else {
                                        this.$message.error(result.msg);
                                    }
                                })
                                .catch(error => {
                                    this.$message.error('更新角色失败: ' + error.message);
                                });
                        } else {
                            // 新增
                            axios.post('/sysRole/add', this.roleForm)
                                .then(response => {
                                    const result = response.data;
                                    if (result.msg === 'success') {
                                        this.$message.success('角色添加成功');
                                        this.roleDialogVisible = false;
                                        this.fetchData();
                                    } else {
                                        this.$message.error(result.msg);
                                    }
                                })
                                .catch(error => {
                                    this.$message.error('新增角色失败: ' + error.message);
                                });
                        }
                    } else {
                        return false;
                    }
                });
            },

            // 删除角色
            handleDelete(row) {
                this.$confirm('确认删除该角色吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/sysRole/RoleDelete', { params: { roleId: row.roleId } })
                        .then(response => {
                            const result = response.data;
                            if (result.msg === 'success') {
                                this.$message.success('角色删除成功');
                                this.fetchData();
                            } else {
                                this.$message.error(result.msg);
                            }
                        })
                        .catch(error => {
                            this.$message.error('删除角色失败: ' + error.message);
                        });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },

            // 显示分配菜单对话框
            showAssignMenuDialog(row) {
                this.currentRoleId = row.roleId;
                this.menuDialogVisible = true;

                // 获取所有菜单树
                axios.get('/sysRole/getMenuTree')
                    .then(response => {
                        if (response.data.success) {
                            this.menuTreeData = response.data.data;

                            // 获取角色已有菜单并设置选中
                            this.getRoleMenus(row.roleId);
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error('获取菜单树失败: ' + error.message);
                    });
            },

            // 获取角色已有菜单
            getRoleMenus(roleId) {
                axios.get('/sysRole/getRoleMenus', { params: { roleId } })
                    .then(response => {
                        if (response.data.success) {
                            this.$nextTick(() => {
                                this.$refs.menuTree.setCheckedKeys(response.data.data);
                            });
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error('获取角色菜单失败: ' + error.message);
                    });
            },

            // 保存角色菜单
            saveRoleMenus() {
                const checkedKeys = this.$refs.menuTree.getCheckedKeys();

                axios.post('/sysRole/saveRoleMenus', {
                    roleId: this.currentRoleId,
                    menuIds: checkedKeys
                })
                    .then(response => {
                        if (response.data.success) {
                            this.$message.success(response.data.msg);
                            this.menuDialogVisible = false;
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error('保存角色菜单失败: ' + error.message);
                    });
            }
        }
    });
</script>
</body>
</html>